 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,minimum-scale=1,user-scalable=yes">
  <title>云存储1</title>
       <script type="text/javascript" src="jscolor/jscolor.js"></script>
     <script type="text/javascript" src="haima.js"></script>
     <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="hammer.min.js"></script>
      <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-theme.min.css">
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.inputyc{
  color:#BABABA;
  width: 180px;
  height: 40px;
  border: 1px solid #CFCFCF;
  border-radius:5px; 
  transform:translateY(-35px);
  font-size: 17px;
  padding:4px;
}
.yuncc{
  white-space: pre-wrap;
  color: #3d3d3d;
  font-size: 20px;
  margin:auto;
  width: 180px;
  /*border: 1px solid #000;*/
  margin-top: 60px;
}
.remove{
 
  border: none;
  background:#FC6A6A;
  color:white;
  font-size: 20px; 
  width: 120px;
  border-radius:20px;
  height: 40px;
}
.sure{
   margin-left: 20px;
  border: none;
  background:#FC1260;
  color:white;
  font-size: 20px; 
  height: 40px;
  width: 120px;
  border-radius:20px;  
}
.btnContain{
  transform:translateY(60px);
  width: 260px;
  margin:auto;
}
#topBar{
  top:0px;
  width: 100%;
  height: 50px;
  background:#ed0f64; 
  position: relative;
  color:white;
  font-size: 23px;
  letter-spacing: 2px;
  text-align: center;
  line-height:50px;
}
.backimg{
  width: 25px;
  height: 25px;
  position: absolute;
  left: 20px;
  margin-top: 15px;
}
.text{
  display: inline-block;
  color:white;
  font-size: 25px;
  letter-spacing: 2px;
  width: 82px;
}
#addBtn{
  width: 25px;
  height: 25px;
  position: absolute;
  right: 20px;
  top:15px;
}
#toast{
  width: 150px;
  position: absolute;
  right: 30px;
  top:50px;
  display: none;
}
</style>
</head>
<body>
<!-- <input type="text" class="color"> -->
  <!--div id="topBar">云存储<img src="./images/back.png" class="backimg"><div class="text" id="text1"></div><a href="newPhoto.html" target="_top"><img src="./images/addButton.png" id="addBtn"><img src="./images/toast.png"  id="toast"/></a></div-->
  <div class="yuncc">
新建相册

    <input type="text" placeholder="  相册名称" class="inputyc" id="dirName">
  </div>
  <div class="btnContain "><button id="cancel" class="btn btn-info remove">取消</button><button class="btn btn-info sure" onclick="makedir()">创建</button></div>
<script type="text/javascript">
//var text1=getId("text1");
//var x=averageWidth(1,text1);
//text1.style.position="absolute";
//text1.style.left=x;
//text1.style.top="15px";
 function bindEvent () {
      var mc = new Hammer.Manager(document.body);
      mc.add(new Hammer.Tap());

      mc.on("tap", function (e) {
          var className=$(e.target).attr("class");
          console.log(e.target.id);
          if(e.target.id=="cancel"){
            api.finish();
          }
          if(className=="advImg"){
            api.graduateDeskCalendar();
          }
      });
    }
  function makedir(){
      var name=getId("dirName").value;
     //api.log(name);
      //var uid="3";
      uid=api.getConfig("uid");
      try{
          $.ajax({
                 url:"http://ttmy.len.so/app/user/makedir",
                 type:'post',
                 dataType:'JSONP',
                 data:'dirname='+name+'&uid='+uid,
                 jsonp:"callback",
                 success: function(data){
                    if(data.status > 0){
                 api.backToFunction("appendata",data.info)
                 
                    }
                    api.finish();
                 }
        });
      }
      catch(e){
      
      }
      //$.post("http://ttmy.len.so/app/user/makedir",{name:name,uid:uid},'json')
      
  }
  bindEvent();
</script>
</body>
</html>